<template>
    <div class="app-container">
        <!--工具栏-->
        <div class="head-container">
            <div v-if="crud.props.searchToggle">

                <div class="head-container">
                    <el-input v-model="query.goodsName" style="width: 200px;" class="filter-item" placeholder="文创名称"
                        size="normal" clearable />

                    <rrOperation />
                </div>
            </div>
            <crudOperation :permission="permission" />
        </div>
        <!--表单组件-->
        <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU"
            :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="1200px">
            <el-form ref="form" :model="form" :inline="true" :rules="rules" size="small" label-width="120px">
                <el-row :gutter="20">
                    <el-col :span="8" :offset="0">
                        <el-form-item label="文创名称" prop="goodsName">
                            <el-input v-model="form.goodsName" style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="0">
                        <el-form-item label="目标人群" prop="aimPeople">
                            <el-input v-model="form.aimPeople" style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="0">
                        <el-form-item label="商品售价" prop="price">
                            <el-input v-model.number="form.price" style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8" :offset="0">
                        <el-form-item label="猛士价格">
                            <el-input v-model.number="form.fiercePrice" style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="0">
                        <el-form-item label="斗士价格">
                            <el-input v-model.number="form.fighterPrice" style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="0">
                        <el-form-item label="王者价格">
                            <el-input v-model.number="form.kingPrice" style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="封面图" prop="coverImage">

                    <el-upload v-loading="coverImage_loading" class="avatar-uploader el-upload"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :http-request="(params) => uploadRequest(params, 'coverImage')" :show-file-list="false">
                        <img v-if="form.coverImage" :src="form.coverImage" class="avatar">
                        <div v-else class="upload-text">选择图片</div>
                        <div class="btn" v-if="form.coverImage">
                            <el-button size="36" type="text" icon="el-icon-delete"
                                @click.stop="deleteImg('coverImage')"></el-button>
                        </div>
                    </el-upload>
                    <el-input v-show="false" v-model="form.coverImage" />
                </el-form-item>
                <el-row :gutter="20">
                    <el-col :span="24" :offset="0">
                        <el-form-item label="详情图" prop="detailImage">
                            <el-upload v-loading="coverImage_loading" class="avatar-uploader el-upload"
                                v-for="(item, index) in detailList" :key="index"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :http-request="(params) => uploadDetailRequest(params, 'detailList', 'detailImage')"
                                :show-file-list="false">
                                <img v-if="item.url" :src="item.url" class="avatar">
                                <div v-else class="upload-text">选择图片</div>
                                <div class="btn" v-if="item.url" @click.stop="deleteImg('coverImage')">
                                    <el-button size="36" type="text" icon="el-icon-delete"></el-button>
                                </div>
                            </el-upload>
                            <el-upload v-loading="coverImage_loading" class="avatar-uploader el-upload"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :http-request="(params) => uploadDetailRequest(params, 'detailList', 'detailImage')"
                                :show-file-list="false">
                                <div class="upload-text">选择图片</div>
                            </el-upload>
                            <el-input v-show="false" v-model="form.detailImage" />
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24" :offset="0">

                        <el-form-item label="轮播图" prop="showImage">
                            <el-upload v-loading="coverImage_loading" class="avatar-uploader el-upload"
                                v-for="(item, index) in bannerList" :key="index"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :http-request="(params) => uploadDetailRequest(params, 'bannerList', 'showImage')"
                                :show-file-list="false">
                                <img v-if="item.url" :src="item.url" class="avatar">
                                <div v-else class="upload-text">选择图片</div>
                                <div class="btn" v-if="item.url" @click.stop="deleteImg('coverImage')">
                                    <el-button size="36" type="text" icon="el-icon-delete"></el-button>
                                </div>
                            </el-upload>
                            <el-upload v-loading="coverImage_loading" class="avatar-uploader el-upload"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :http-request="(params) => uploadDetailRequest(params, 'bannerList', 'showImage')"
                                :show-file-list="false">
                                <div class="upload-text">选择图片</div>
                            </el-upload>
                            <el-input v-show="false" v-model="form.showImage" />
                        </el-form-item>
                    </el-col>

                </el-row>

                <el-form-item label="发货地址" prop="addressInfo" style="width: 100%;">
                    <el-input v-model="form.addressInfo" type="textarea" :rows="4" style="width: 900px;" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="text" @click="crud.cancelCU">取消</el-button>
                <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
            </div>
        </el-dialog>
        <!--表格渲染-->
        <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%"
            @selection-change="crud.selectionChangeHandler">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="coverImage" label="封面图">
                <template slot-scope="scope">
                    <img :src="scope.row.coverImage" style="width: 100px;height: 100px;object-fit: cover;">
                </template>
            </el-table-column>
            <el-table-column prop="goodsName" label="商品名称" />
            <el-table-column prop="price" label="售价" />
            <el-table-column prop="fiercePrice" label="猛士价格" />
            <el-table-column prop="fighterPrice" label="斗士价格" />
            <el-table-column prop="kingPrice" label="王者价格" />
            <el-table-column prop="ifRecommend" label="上架状态">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" active-color="#13ce66"
                        inactive-color="#909399" @change="changeStatus($event, scope.row)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="ifRecommend" label="推荐状态">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.ifRecommend" :active-value="true" :inactive-value="false"
                        active-color="#13ce66" inactive-color="#909399"
                        @change="changeRecommonedStatus($event, scope.row)"></el-switch>
                </template>
            </el-table-column>

            <el-table-column v-if="checkPer(['admin', 'serverDeploy:edit', 'serverDeploy:del'])" label="操作" width="150px"
                align="center">
                <template slot-scope="scope">
                    <udOperation :data="scope.row" :permission="permission" />
                </template>
            </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination />
    </div>
</template>

<script>

import crudGoods, { changeRecommend } from '@/api/mini/goods'
import { uploadFile } from '@/api/data'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
const defaultForm = { title: '', type: '', ifShow: '', limitAmount: '', sort: '', coverImage: '', content: '' }
export default {
    name: 'Contract',
    dicts: ['task_type'],
    components: { pagination, crudOperation, rrOperation, udOperation },
    cruds() {
        return CRUD({ title: '文创', url: '/api/goods/goodsList', listMethod: 'post', listKey: ['data', 'list'], totalKey: ['data', 'total'], crudMethod: { ...crudGoods }, query: { type: 1 } })
    },
    mixins: [presenter(), header(), form(defaultForm), crud()],

    data() {
        return {
            accountList: [],
            accountMap: {},
            loading: false,
            coverImage_loading: false,
            detailList: [],
            bannerList: [],
            permission: {
                add: ['admin', 'proportion:add'],
                edit: ['admin', 'proportion:edit'],
                del: ['admin', 'proportion:del']
            },
            rules: {
                goodsName: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
                type: [{ required: true, message: '请选择任务类型', trigger: 'blur' }],
                ifShow: [{ required: true, message: '请选择是否显示', trigger: 'blur' }],
                coverImage: [{ required: true, message: '请上传封面图', trigger: 'blur' }],
                detailImage: [{ required: true, message: '请上传详情图', trigger: 'blur' }],
                showImage: [{ required: true, message: '请上传轮播图', trigger: 'blur' }],
                addressInfo: [{ required: true, message: '请输入发货地址', trigger: 'blur' }]
            }
        }
    },
    methods: {
        detailImgchange() {
            console.log('this.fileList :>> ', this.fileList)
        },

        uploadRequest(params, key) {
            console.log('params :>> ', params)
            this[`${key}_loading`] = true
            uploadFile(params).then(res => {
                console.log('res :>> ', res)
                this[`${key}_loading`] = false
                this.form[key] = res.data
                this.$set(this.form, key, res.data)
            })
        },
        uploadDetailRequest(params, listKey, key) {
            uploadFile(params).then(res => {
                this[listKey].push({ name: params.file.name, url: res.data })
                this.form[key] = this[listKey].map(item => item.url).join(',')
            })
        },

        deleteImg(key) {
            this.form[key] = ''
        },
        changeStatus(status, row) {
            this.$confirm('确定要修改上架状态吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                crudGoods.changeGoodsStatus(row.id).then(res => {
                    this.$message.success('修改成功')
                    this.crud.toQuery()

                })
            }).catch(() => {
                row.status = !status
            })
        },
        changeRecommonedStatus(status, row) {
            this.$confirm('确定要修改推荐状态吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                changeRecommend(row.id).then(res => {
                    this.$message.success('修改成功')
                    this.crud.toQuery()
                })
            }).catch(() => {
                row.status = !status
            })
        },

        // 新增编辑前做的操作
        [CRUD.HOOK.beforeToCU](crud, form) {
            this.bannerList = form.showImage ? form.showImage.split(',').map(url => ({ url })) : []
            this.detailList = form.detailImage ? form.detailImage.split(',').map(url => ({ url })) : []
        },

    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
    text-align: left;
}

.avatar-uploader,
.el-upload {
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px !important;
    height: 178px;
    display: inline-block;
}

.avatar-uploader:hover,
.el-upload:hover {
    border-color: #409EFF;
}

.upload-text {
    font-size: 14px;
    color: #8c939d;
    line-height: 178px;
    text-align: center;
    margin: 0 auto;
}

.avatar {
    width: 178px;
    height: 178px;
    display: inline-block;
    object-fit: cover;
}

.btn {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    width: 178px !important;
    height: 178px;
    border-radius: 0 6px 0 6px;
    text-align: center;
    line-height: 178px;
}

.avatar-uploader:hover {

    // 鼠标悬浮显示按钮
    .btn {
        display: block;
    }

}
</style>
